<template>
    <el-dialog class="reg-contest" draggable align-center 
    title='报名参赛'
    v-model="dialogVisible"
    @close="closeDialog" width="800">
        <el-form   :inline="true" label-width="120px">
            <el-form-item label="姓名" prop="nikeName">
                <el-input v-model="userInfo.nickname" disabled/>
            </el-form-item>
            <el-form-item label="学院" prop="workName">
                <el-input v-model="userInfo.academy" disabled/>
            </el-form-item>
            <el-form-item label="赛事名称" prop="workType" style="width: 100%">
                <el-input width="800" v-model="raceInfo.raceName" disabled style="width: calc(100% - 100px)"/>
            </el-form-item>
            <el-form-item label="类型" prop="workDescription">
                <el-input v-model="raceInfo.raceType" disabled/>
            </el-form-item>
            <el-form-item label="院系" prop="workCouerPath">
                <el-input v-model="raceInfo.raceAcademy" disabled/>
            </el-form-item>
        </el-form>
        
        <template #footer>
            <el-button @click="closeDialog">取消</el-button>
            <!-- <el-button type="primary" @click="saveWork(userFormRef)">保存</el-button> -->
            <SubmitButton round @click="regContest" color="#78e26c" class="detail-btn" value="确认报名" />
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { PostMyContest } from '@/api/front/contest';
import SubmitButton from "@/components/RepackageComponent/SubmitButton.vue";
import store from '@/store';


const userInfo = store.state.userInfo
const dialogVisible = ref(false)

const raceInfo = ref(
    {
        id: 0,
        raceName: '',
        raceType: '',
        raceAcademy: ''
    }
    
)


const openDialog = (data) => {
    dialogVisible.value = true
    console.log(data)
    raceInfo.value = data
    console.log(raceInfo.value)
    
}
const closeDialog = () => {
    dialogVisible.value = false
}

const regContest = async () => {
    const res = await PostMyContest({
        userId: userInfo.userId,
        contestId: raceInfo.value.id,
        status: 0
    })
    if (res.data == '添加成功') {
        ElMessage.success('报名成功')
        closeDialog()
    } else {
        ElMessage.error('报名失败')
    }
}

defineExpose({
  openDialog
})

</script>

<style scoped lang="scss">
</style>